<template lang="html">
  <div class="cityBar">
    <div class="citys">
      <span class="tit">选择城市：</span>
      <ul class="cityList">
        <li v-for='(item,index) in city'
        @click='loadToLawyer(index)'
        :class='{active:index==num}'>{{item.name}}</li>
      </ul>
      <span class="more" v-if='show'>更多 <i class="el-icon-d-arrow-right"></i></span>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props:{
    city:Object()
  },
  data(){
    return{
      num:0,show:false,arr:[]
    }
  },
  methods:{
    loadToLawyer:function(index){
      this.num=index;
      let id=this.city[index].id;
      let type=this.city[index].type;
      // 初始值数组
      let arr_n=[];
      for(let i=0;i<this.city.length;i++){
        arr_n.push(12);
      }
      this.arr=arr_n;
      this.$emit('emitEvent',[id,type,this.arr,index])
    },
    moreShow:function(){
      let len=this.city.length;
      if(len>13){
        this.show=true
      }
    }
  },
  mounted(){
    this.moreShow()
  }
}
</script>

<style lang="less">
@import "cityBar.less";
</style>
